<template>
    <div ref="exportModel" v-loading="showLoading">
        <div class="uiwu-header">
            <el-page-header @back="$router.go(-1)" content="订单详情" />
        </div>
        <div class="uiwu-content">
            <div class="header">
                <span>基础信息</span>
                <el-button type="info" @click="exportOrder">订单导出</el-button>
            </div>
            <el-form inline label-width="80px">
                <el-form-item style="width: 45%" label="订单编号">{{ orderInfo.sn }}</el-form-item>
                <el-form-item style="width: 45%" label="用户名称">{{ orderInfo.store_name }}</el-form-item>
                <el-form-item style="width: 45%" label="手机号码">{{ orderInfo.store_mobile }}</el-form-item>
                <el-form-item style="width: 45%" label="订单状态">{{ orderInfo.order_status_desc }}</el-form-item>
            </el-form>
        </div>
        <div class="uiwu-content">
            <div class="header">
                <span>收货地址信息</span>
            </div>
            <el-form inline label-width="80px">
                <el-form-item style="width: 45%" label-width="92px" label="联系人名称">{{
                    orderInfo.contact
                }}</el-form-item>
                <el-form-item style="width: 45%" label="手机号码">{{ orderInfo.mobile }}</el-form-item>
                <el-form-item label="服务地址">{{ orderInfo.delivery_address }}</el-form-item>
            </el-form>
        </div>
        <div class="uiwu-content">
            <div class="header">
                <span>商品信息</span>
            </div>
            <el-table :data="orderInfo.order_goods" style="width: 100%">
                <el-table-column prop="封面图" label="封面图" align="center">
                    <template #default="{ row }">
                        <el-image
                            :src="row.goods_image"
                            style="width: 70px; height: 70px"
                            :preview-src-list="[row.goods_image]"
                        ></el-image>
                    </template>
                </el-table-column>
                <el-table-column prop="goods_name" label="商品名称" align="center" />
                <el-table-column prop="spec_value_str" label="规格" align="center" />
                <el-table-column prop="goods_price" label="单价" align="center" />
                <el-table-column prop="unit" label="单位" align="center" />
                <el-table-column prop="goods_num" label="数量" align="center" />
                <el-table-column prop="total_price" label="小计" align="center" />
            </el-table>
        </div>
        <div class="uiwu-content">
            <div class="header">
                <span>金额信息</span>
            </div>
            <el-form inline label-width="80px">
                <el-form-item style="width: 45%" label-width="92px" label="订单总金额">{{
                    orderInfo.goods_price
                }}</el-form-item>
                <el-form-item style="width: 45%" label-width="92px" label="实际支付金额">{{
                    orderInfo.order_amount
                }}</el-form-item>
            </el-form>
        </div>
        <div class="uiwu-content">
            <div class="header">
                <span>订单备注</span>
            </div>
            <textarea class="uiwu-textarea" disabled :value="orderInfo.user_remark"></textarea>
        </div>
        <div class="uiwu-content">
            <div class="header">
                <span>订单日志</span>
            </div>
            <el-form label-width="147px">
                <el-form-item :label="item.create_time" v-for="(item, index) in orderInfo.order_log">{{
                    item.channel_desc
                }}</el-form-item>
            </el-form>
        </div>
    </div>
</template>

<script lang="ts">
import { Component, Vue } from 'vue-property-decorator'
import { apiOrderDetail } from '@/api/order/order'
import html2canvas from 'html2canvas'
@Component({
    components: {}
})
export default class OrderDetail extends Vue {
    tableData: any[] = []
    orderInfo: any = []
    showLoading = false
    async getapiOrderDetail() {
        const data = await apiOrderDetail({ id: this.$route.query.id })
        this.orderInfo = data
    }
    exportOrder() {
        this.showLoading = true
        const exportContent = this.$refs.exportModel
        if (exportContent instanceof HTMLElement) {
            html2canvas(exportContent, {
                useCORS: true
            }).then(canvas => {
                const imgData = canvas.toDataURL('image/png') // 转换成base64编码的图片数据
                const link = document.createElement('a')
                link.download = 'exported_image.png' // 设置下载的文件名
                link.href = imgData // 设置图片的base64编码数据
                link.click() // 触发下载
                this.showLoading = false
            })
        } else {
            this.showLoading = false
            console.error('Export content is not a valid HTMLElement.')
        }
    }
    created() {
        this.getapiOrderDetail()
    }
}
</script>

<style lang="scss" scoped>
.uiwu-header {
    margin-bottom: 16px;
    padding: 16px;
    background-color: #fff;
}

.uiwu-content {
    margin-bottom: 16px;
    padding: 16px;
    background-color: #fff;
    .uiwu-textarea {
        resize: none;
        width: 100%;
        background: transparent;
        border: 0;
        height: 300px;
    }
    .header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 16px;

        > span {
            font-size: 18px;
            font-weight: 600;
            display: flex;
            align-items: center;

            &::before {
                content: '';
                width: 4px;
                height: 18px;
                background: #409eff;
                margin-right: 10px;
            }
        }
    }
}
</style>
